<div class="flex-column d-flex align-items-stretch h-100 w-100 pb-3 overflow-auto no-scrollbars">
  <div class="drag-handler p-2" [ngClass]="{ 'widget-cursor': widget.draggable }">
    {{ 'child_bridge.bridges' | translate }}
  </div>
  <div
    class="d-flex flex-wrap w-100 mt-0 justify-content-start gridster-item-content overflow-auto no-scrollbars align-items-center"
  >
    <div class="hb-status-item d-flex flex-row w-100 px-3 mt-2 mb-1" style="min-width: max(25%, 225px)">
      <div class="hb-status-icon d-flex align-items-center">
        <i
          class="fas fa-hap fa-sm"
          [ngClass]="{
            'green-text': homebridgeStatus.status === 'ok' && !isRestarting,
            'text-warning': homebridgeStatus.status === 'pending' || isRestarting,
            'red-text': homebridgeStatus.status === 'down' && !isRestarting
          }"
          container="body"
          placement="right"
          [openDelay]="150"
          triggers="hover"
          [ngbTooltip]="(homebridgeStatus.status === 'down' && !isRestarting ? 'status.services.label_not_running' : 'status.services.label_running') | translate"
          [attr.aria-label]="(homebridgeStatus.status === 'down' && !isRestarting ? 'status.services.label_not_running' : 'status.services.label_running') | translate"
        ></i>
      </div>
      <div class="align-self-center flex-child px-2">{{ homebridgeStatus.name || 'Homebridge' }}</div>
      <div class="grey-text ms-auto d-flex align-items-center">
        @if (homebridgeStatus.status !== 'pending' && !isRestarting && isAdmin) {
        <i
          class="icon-button fas fa-power-off"
          href="javascript:void(0)"
          (click)="restartHomebridge()"
          [ngbTooltip]="'menu.tooltip_restart' | translate"
          container="body"
          [openDelay]="150"
          triggers="hover"
          placement="left"
        ></i>
        } @if (homebridgeStatus.status === 'pending' || isRestarting) {
        <i class="fas fa-spinner fa-pulse"></i>
        }
      </div>
    </div>
    <!-- Child Bridges -->
    @for (bridge of childBridges; track bridge.username) {
    <div class="hb-status-item d-flex flex-row w-100 px-3 mt-2 mb-1" style="min-width: max(25%, 225px)">
      <div class="hb-status-icon d-flex align-items-center">
        <i
          class="fas fa-hap fa-sm"
          [ngClass]="{
            'green-text': bridge.status === 'ok' && !bridge.restarting && !isRestarting,
            'text-warning': bridge.status === 'pending' || bridge.restarting || isRestarting,
            'red-text': bridge.status === 'down' && !bridge.restarting && !isRestarting
          }"
          container="body"
          placement="right"
          [openDelay]="150"
          triggers="hover"
          [ngbTooltip]="(bridge.status === 'down' && !bridge.restarting && !isRestarting ? 'status.services.label_not_running' : 'status.services.label_running') | translate"
          [attr.aria-label]="(bridge.status === 'down' && !bridge.restarting && !isRestarting ? 'status.services.label_not_running' : 'status.services.label_running') | translate"
        ></i>
      </div>
      <div class="align-self-center flex-child px-2">{{ bridge.name }}</div>
      <div class="grey-text ms-auto d-flex align-items-center">
        @if (bridge.status !== 'pending' && !bridge.restarting && !isRestarting && isAdmin) {
        <i
          class="icon-button fas fa-power-off"
          href="javascript:void(0)"
          (click)="restartChildBridge(bridge)"
          [ngbTooltip]="'menu.tooltip_restart' | translate"
          container="body"
          [openDelay]="150"
          triggers="hover"
          placement="left"
        ></i>
        } @if (bridge.status === 'pending' || bridge.restarting || isRestarting) {
        <i class="fas fa-spinner fa-pulse"></i>
        }
      </div>
    </div>
    }
  </div>
</div>
